<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>create</title>

    <link rel="stylesheet" href="./css/reset.css">
    <link href="./css/bootstrap.css" rel="stylesheet">
    <link href="./css/bootstrap-theme.min.css" rel="stylesheet">

    <link href="./css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="./theme.css" rel="stylesheet">

    <link rel="stylesheet" href="./css/demo.css">
    <link rel="stylesheet" href="./css/create.css">
    <script src="./js/ie-emulation-modes-warning.js"></script>


</head>

<script type="text/javascript">
    function divClick() {

        var show = "";
        var apm = document.getElementsByName("item");
        for (var i = 0; i < apm.length; i++) {
            if (apm[i].checked)
                show = apm[i].value;
        }

        switch (show) {
            case 'absorption':
                document.getElementById("box1").style.display = "block";
                document.getElementById("box2").style.display = "none";
                document.getElementById("box3").style.display = "none";
                document.getElementById("box4").style.display = "none";
                document.getElementById("box5").style.display = "none";
                document.getElementById("box6").style.display = "block";
                break;
            case 'distribution':
                document.getElementById("box1").style.display = "none";
                document.getElementById("box2").style.display = "block";
                document.getElementById("box3").style.display = "none";
                document.getElementById("box4").style.display = "none";
                document.getElementById("box5").style.display = "none";
                document.getElementById("box6").style.display = "block";
                break;
            case 'metabolism':
                document.getElementById("box1").style.display = "none";
                document.getElementById("box2").style.display = "none";
                document.getElementById("box3").style.display = "block";
                document.getElementById("box4").style.display = "none";
                document.getElementById("box5").style.display = "none";
                document.getElementById("box6").style.display = "block";
                break;
            case 'excretion':
                document.getElementById("box1").style.display = "none";
                document.getElementById("box2").style.display = "none";
                document.getElementById("box3").style.display = "none";
                document.getElementById("box4").style.display = "block";
                document.getElementById("box5").style.display = "none";
                document.getElementById("box6").style.display = "block";
                break;
            case 'toxicity':
                document.getElementById("box1").style.display = "none";
                document.getElementById("box2").style.display = "none";
                document.getElementById("box3").style.display = "none";
                document.getElementById("box4").style.display = "none";
                document.getElementById("box5").style.display = "block";
                document.getElementById("box6").style.display = "block";
                break;
            default:
                document.getElementById("box1").style.display = "none";
                document.getElementById("box2").style.display = "none";
                document.getElementById("box3").style.display = "none";
                document.getElementById("box4").style.display = "none";
                document.getElementById("box5").style.display = "none";
                document.getElementById("box6").style.display = "none";
                break;
        }
    }  
</script>

<body>

    <div class="web">
        <header>
            <nav class="navbar navbar-default navbar-fixed-top wrap_1000">
                <div class="container-fluid">
                    <!-- float left & logo space -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="./index.html"><img src="" alt=""></a>
                    </div>
                    <!--  -->
                    <div id="navbar" class="navbar-collapse collapse">
                        <!-- nav list -->
                        <ul class="nav navbar-nav">
                            <li><a href="./task_list.html">
                                    <button type="button" class="btn btn-lg btn-primary">任务列表</button>
                                </a></li>
                            <li><a href="#">
                                    <button type="button" class="btn btn-lg btn-primary">添加任务</button>
                                </a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                        </ul>
                        <!-- user -->
                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                    aria-haspopup="true" aria-expanded="false">
                                    <button type="button" class="btn btn-lg btn-info">用户: Moran<span
                                            class="caret"></span></button>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="./login.html">切换账号</a></li>
                                    <li><a href="./login.html">退出系统</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
                <!--/.container-fluid -->
            </nav>
        </header>

        <!-- main part -->
        <main class="container-fluid wrap_1000">
            <div class="row">
                <div class="col-xs-2  leftBar">
                    <!-- <button type="button" class="btn btn-lg btn-primary">Primary</button> -->
                </div>
                <div class="col-xs-8 ">
                    <!-- workspace -->
                    <div class="workspace container-fluid">
                        <!-- 1. task ID -->
                        <div class="row tsk_id">
                            <div class="col-sm-4">
                                <button type="button" class="btn btn-lg btn-success">任务ID</button>
                            </div>
                            <div class="col-sm-4">
                                <div class="ipt_text_lg">
                                    <input type="text" name="" id="" placeholder="4">
                                </div>
                            </div>
                        </div>
                        <!-- 2. open file -->
                        <div class="row o_file">
                            <div class="col-sm-4">
                                <button type="button" class="btn btn-lg btn-warning">选择文件</button>
                            </div>
                            <div class="col-sm-4">
                                <div class="ipt_text_lg">
                                    <input type="file" name="" id="" class="ugly">
                                    <!-- <span>点击选取文件</span> -->
                                </div>
                            </div>
                        </div>
                        <!-- 3. cancel -->
                        <div class="row cancel">
                            <div class="col-sm-4 hidden-xs">
                            </div>
                            <div class="col-sm-4">
                                <button type="button" class="btn btn-lg btn-warning">取消</button>
                            </div>
                        </div>
                        <!-- 4. edit -->
                        <div class="row edit">
                            <!-- list group -->
                            <div class="col-xs-12 col-sm-4">
                                <div class="list-group">
                                    <!-- <a href="" class="list-group-item active"> -->
                                    <li class="list-group-item active">
                                        <h2 class="panel-title">编辑任务</h2>
                                    </li>
                                    <label for="abs">
                                        <li class="list-group-item">
                                            <input type="radio" value="absorption" name="item" id="abs"
                                                onclick="divClick();">
                                            <label for="abs">Absorption 吸收</label>
                                        </li>
                                    </label>
                                    <label for="dis">
                                        <li class="list-group-item">
                                            <input type="radio" value="distribution" name="item" id="dis"
                                                onclick="divClick();">
                                            <label for="dis">Distribution 分布</label>
                                        </li>
                                    </label>
                                    <label for="met">
                                        <li class="list-group-item">
                                            <input type="radio" value="metabolism" name="item" id="met"
                                                onclick="divClick();">
                                            <label for="met">Metabolism 代谢</label>
                                        </li>
                                    </label>
                                    <label for="exc">
                                        <li class="list-group-item">
                                            <input type="radio" value="excretion" name="item" id="exc"
                                                onclick="divClick();">
                                            <label for="exc">Excretion 排泄</label>
                                        </li>
                                    </label>
                                    <label for="tox">
                                        <li class="list-group-item li_bot_rad">
                                            <input type="radio" value="toxicity" name="item" id="tox"
                                                onclick="divClick();">
                                            <label for="tox">Toxicity 毒性</label>
                                        </li>
                                    </label>
                                </div>
                            </div>
                            <!-- table part -->
                            <div class="col-xs-12 col-sm-8">
                                <!-- box1 abs -->
                                <div class="test_box" id="box1">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>参数</th>
                                                <th>单位</th>
                                                <th>最大值</th>
                                                <th>最小值</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>脂溶性</td>
                                                <td><input type="text" placeholder="(可自行设置单位)"></td>
                                                <td colspan="2"><input type="text" placeholder="默认值or自行设置"></td>
                                            </tr>
                                            <tr>
                                                <td>溶解度</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>透皮吸收率</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>脂水分配系数</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- box2 dis -->
                                <div class="test_box" id="box2">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>参数</th>
                                                <th>单位</th>
                                                <th>最大值</th>
                                                <th>最小值</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>表现分布容积</td>
                                                <td><input type="text" placeholder="(可自行设置单位)"></td>
                                                <td colspan="2"><input type="text" placeholder="默认值or自行设置"></td>
                                            </tr>
                                            <tr>
                                                <td>人血蛋白结合率</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>人血血浆化合物浓度比</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- box3 met -->
                                <div class="test_box" id="box3">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>参数</th>
                                                <th>单位</th>
                                                <th>最大值</th>
                                                <th>最小值</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>化合物清除率</td>
                                                <td><input type="text" placeholder="(可自行设置单位)"></td>
                                                <td colspan="2"><input type="text" placeholder="默认值or自行设置"></td>
                                            </tr>
                                            <tr>
                                                <td>化合物半衰期</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>化合物稳定性</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- box4 exc -->
                                <div class="test_box" id="box4">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>参数</th>
                                                <th>单位</th>
                                                <th>最大值</th>
                                                <th>最小值</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>肾排泄分数</td>
                                                <td><input type="text" placeholder="(可自行设置单位)"></td>
                                                <td colspan="2"><input type="text" placeholder="默认值or自行设置"></td>
                                            </tr>
                                            <tr>
                                                <td>胆汁排泄</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>粪便排泄</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- box5 tox -->
                                <div class="test_box" id="box5">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>参数</th>
                                                <th>单位</th>
                                                <th>最大值</th>
                                                <th>最小值</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>致畸性</td>
                                                <td><input type="text" placeholder="(可自行设置单位)"></td>
                                                <td colspan="2"><input type="text" placeholder="默认值or自行设置"></td>
                                            </tr>
                                            <tr>
                                                <td>致癌性</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                            <tr>
                                                <td>致突变性</td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                                <td><input type="text"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- button area -->
                                <div class="button_area container-fluid test_box" id="box6">
                                    <div class="row btn_area">
                                        <div class="col-xs-6">
                                            <button type="button" class="btn btn-lg btn-primary">取消</button>
                                        </div>
                                        <div class="col-xs-6">
                                            <a href="./task_list.html">
                                                <button type="button" class="btn btn-lg btn-primary">确认</button>
                                            </a>
                                        </div>
                                    </div>
                                </div><!-- button finish -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-2 "></div>
            </div>
        </main>

    </div>

    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/docs.min.js"></script>
    <script src="./js/ie10-viewport-bug-workaround.js"></script>

</body>

</html>